<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-content">
          <div class="hero new-york">
            <div class="calendar">
              <span class="date">
                27
              </span>
              <span class="month">
                MAR
              </span>
            </div>
            <div class="photo-btn">
              <div class="text">SADF</div>
              <div class="gallery">
                <div class="row top">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row middle">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row bottom">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
              </div>
            </div>
          </div>
          <div class="copy">
            <h1>sdfgsdf</h1>
            <h3>sgfsdfg.</h3>
            <p>
              重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
            </p>
            <div class="footer">
              <div class="time">
                <div><i class="fas fa-clock fa-fw" /> 6 mins ago</div>
              </div>
              <div class="comments">
                <div><i class="fas fa-comments fa-fw" /> 39 sdf</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-content">
          <div class="hero san-fran">
            <div class="calendar">
              <span class="date">
                28
              </span>
              <span class="month">
                SFG
              </span>
            </div>
            <div class="photo-btn">
              <div class="text">SDFG</div>
              <div class="gallery">
                <div class="row top">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row middle">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row bottom">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
              </div>
            </div>
          </div>
          <div class="copy">
            <h1>ASDF ASDF</h1>
            <h3>ASDFG.</h3>
            <p>
              重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
            </p>
            <div class="footer">
              <div class="time">
                <div><i class="fas fa-clock fa-fw" /> 12 mins ago</div>
              </div>
              <div class="comments">
                <div><i class="fas fa-comments fa-fw" /> ASD</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-content">
          <div class="hero chicago">
            <div class="calendar">
              <span class="date">
                29
              </span>
              <span class="month">
                ASDFA
              </span>
            </div>
            <div class="photo-btn">
              <div class="text">ASDF</div>
              <div class="gallery">
                <div class="row top">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row middle">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row bottom">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
              </div>
            </div>
          </div>
          <div class="copy">
            <h1>ASDF</h1>
            <h3>ASDF.</h3>
            <p>
              重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
            </p>
            <div class="footer">
              <div class="time">
                <div><i class="fas fa-clock fa-fw" /> 18 mins ago</div>
              </div>
              <div class="comments">
                <div><i class="fas fa-comments fa-fw" /> 102 comments</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-content">
          <div class="hero new-york">
            <div class="calendar">
              <span class="date">
                27
              </span>
              <span class="month">
                MAR
              </span>
            </div>
            <div class="photo-btn">
              <div class="text">SADF</div>
              <div class="gallery">
                <div class="row top">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row middle">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row bottom">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
              </div>
            </div>
          </div>
          <div class="copy">
            <h1>ASDF</h1>
            <h3>ASDF.</h3>
            <p>
              重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
            </p>
            <div class="footer">
              <div class="time">
                <div><i class="fas fa-clock fa-fw" /> 6 mins ago</div>
              </div>
              <div class="comments">
                <div><i class="fas fa-comments fa-fw" /> 39 comments</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-content">
          <div class="hero san-fran">
            <div class="calendar">
              <span class="date">
                28
              </span>
              <span class="month">
                MAR
              </span>
            </div>
            <div class="photo-btn">
              <div class="text">SDAF</div>
              <div class="gallery">
                <div class="row top">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row middle">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row bottom">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
              </div>
            </div>
          </div>
          <div class="copy">
            <h1>SSADF</h1>
            <h3>ASDF.</h3>
            <p>
              重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
            </p>
            <div class="footer">
              <div class="time">
                <div><i class="fas fa-clock fa-fw" /> 12 mins ago</div>
              </div>
              <div class="comments">
                <div><i class="fas fa-comments fa-fw" /> 64 comments</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-content">
          <div class="hero chicago">
            <div class="calendar">
              <span class="date">
                29
              </span>
              <span class="month">
                MAR
              </span>
            </div>
            <div class="photo-btn">
              <div class="text">SADF</div>
              <div class="gallery">
                <div class="row top">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row middle">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
                <div class="row bottom">
                  <div class="image one" />
                  <div class="image two" />
                  <div class="image three" />
                </div>
              </div>
            </div>
          </div>
          <div class="copy">
            <h1>ASDF</h1>
            <h3>TASDF</h3>
            <p>
              重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
            </p>
            <div class="footer">
              <div class="time">
                <div><i class="fas fa-clock fa-fw" /> 18 mins ago</div>
              </div>
              <div class="comments">
                <div><i class="fas fa-comments fa-fw" /> 102 comments</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination" />
  </div>
</template>

<script>
export default {
  mounted() {
    new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  }
}
</script>
<style lang="scss" scoped>
h1 {
  font-size: 1.8rem;
  padding: 0;
  margin: 0 10px 0 0;
}

h3 {
  font-size: 1.3rem;
  padding: 0;
  margin: 5px 0 15px 0;
  color: darkred;
}

p {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: graytext;
}

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  width: 400px;
  height: 500px;
  padding: 5px;
}

.swiper-content {
  background-color: #fff;
  width: 100%;
  height: 100%;
  .hero {
    width: 100%;
    height: 175px;
    position: relative;
    .calendar {
      width: 60px;
      height: 60px;
      float: right;
      background-color: darkred;
      border-radius: 50%;
      margin-right: 15px;
      margin-top: 15px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .date {
        font-size: 1.2rem;
        line-height: 1.3rem;
      }
      .month {
        font-size: 0.8rem;
      }
    }
    .photo-btn {
      position: absolute;
      bottom: 0;
      width: 100px;
      height: 40px;
      background-color: darkred;
      border: none;
      font-size: 1.2rem;
      font-weight: bold;
      color: #fff;
      transition: 0.2s all;
      cursor: pointer;
      display: flex;
      align-content: center;
      justify-content: center;
      &:hover {
        width: 100%;
        height: 100%;
        transition: 0.2s all;
        .text {
          display: none;
        }
        .gallery {
          display: flex;
        }
      }
      .text {
        text-align: center;
        line-height: 40px;
      }
      .gallery {
        width: 100%;
        display: none;
        flex-direction: column;
        .row {
          width: 100%;
          height: 34%;
          display: flex;
          .image {
            opacity: 0.6;
            width: 34%;
            height: 100%;
            display: inline-block;
            transition: 0.2s all;
            &:hover {
              opacity: 1;
              transition: 0.2s all;
            }
          }
        }
      }
    }
    &.new-york {
      background: url("https://daytripsontario.files.wordpress.com/2017/03/img_6859-copy.jpg");
      background-position: center;
      background-size: cover;
      .top {
        .image {
          &.one {
            background: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://medicalcannabiscultivation.com/wp-content/uploads/2018/03/NY.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("https://www.nycgo.com/images/made/images/uploads/articles/NYC_in_3_Days/TimesSquare-TaggerYanceyIV_900_600_70.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .middle {
        .image {
          &.one {
            background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRS7O-nPTS9BLCUX-uV1jihGs2QetTViwoOhUK0jctN6QLhITWCKA");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://cdn.vox-cdn.com/thumbor/L9EthniNFveihyyk7EQSOhsx9_8=/0x0:3000x2002/1200x800/filters:focal(1260x761:1740x1241)/cdn.vox-cdn.com/uploads/chorus_image/image/55473705/uppereastside.0.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("https://www.nps.gov/subjects/urban/images/new-york.JPG?maxwidth=1200&maxheight=1200&autorotate=false");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .bottom {
        .image {
          &.one {
            background: url("https://d1v5vpeyrmf36z.cloudfront.net/media/CACHE/images/image-previews/squares/Tishman_RC_AttactionModule_600x600/1eb15b14cfbb90dba0e3813bc8193580.jpg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("http://static1.squarespace.com/static/5813cddb8419c25c3b42eacd/5813e156414fb51499dfe55c/58670bbb197aea5283327c61/1488664764289/?format=1000w");
            background-size: cover;
            background-position: center;
          }
        }
      }
    }
    &.san-fran {
      background: url("http://s3.envato.com/files/241747423/20171202-North-Beach-p4p-0197-4mp.jpg");
      background-position: center;
      background-size: cover;
      .top {
        .image {
          &.one {
            background: url("https://cdn.vox-cdn.com/thumbor/nkA0OYFOejA96gXee5DQG9RZVFk=/0x0:1368x912/1200x800/filters:focal(575x347:793x565)/cdn.vox-cdn.com/uploads/chorus_image/image/55144679/Pius_Lee.0.jpg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzWjZw4b1U4dttrxI7n1GZKiJ3hkQxl8d3bHcXlo0a7v89a-NpHw");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("http://assets.fodors.com/destinations/54494/alamo-square-san-francisco-california-usa_main.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .middle {
        .image {
          &.one {
            background: url("https://cdn-images-1.medium.com/max/800/1*J0Znftz9w-YEdOSILoV6kw.jpeg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://www.jetblue.com/img/vacations/destination/San-Francisco-960-x-420.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("https://az616578.vo.msecnd.net/files/2016/05/16/635989831137616837-380923038_san-francisco-real-estate-market-trends-3.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .bottom {
        .image {
          &.one {
            background: url("http://s79f01z693v3ecoes3yyjsg1.wpengine.netdna-cdn.com/wp-content/uploads/2016/12/sf.IDriveSF.1230.jpg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://www.smartdestinations.com/img/pt/dest/Sfo/att/Sfo_Att_Hop_On_Hop_Off_Classic_Tour_1_Day_Ticket/gallery/Hop-On-Hop-Off-Classic-Tour-1-Day-Ticket-1.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/San_Francisco_%28Evening%29.jpg/1200px-San_Francisco_%28Evening%29.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
    }
    &.chicago {
      background: url("https://i2.wp.com/www.maven.co/wp-content/uploads/2014/07/Chicago-Skyline.jpg?ssl=1");
      background-position: center;
      background-size: cover;
      .top {
        .image {
          &.one {
            background: url("http://www.chicagobusiness.com/apps/pbcsi.dll/storyimage/CG/20180118/NEWS07/180119900/AR/0/amazon-hq2-chicago.jpg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://chicagoinnovation.com//wp-content/uploads/2017/10/chicago_innovation_mission_video_screenshot.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("http://www.monaco-chicago.com/images/1700-960/chicago-skyline-f81e26ea.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .middle {
        .image {
          &.one {
            background: url("https://www.visittheusa.co.uk/sites/default/files/styles/hero_m_1300x700/public/images/hero_media_image/2018-05/2af94a274ebf7f6716f9b2068595581c.jpeg?itok=E4aYJ2RV");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://3hkj9i2chtjx336clgvx1skh-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/DowntownChicago_BodyImage.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/chicago/01-city-landing/View-Of-Chicago-Oak-St-Beach-Lake-Michigan.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
      .bottom {
        .image {
          &.one {
            background: url("https://tt-wp-insider.imgix.net/2018/04/chicago-oak-street-beach-downtown.jpg");
            background-size: cover;
            background-position: center;
          }
          &.two {
            background: url("https://img.buzzfeed.com/buzzfeed-static/static/2014-03/campaign_images/webdr06/27/23/50-things-you-probably-didnt-know-about-chicago-2-16837-1395978386-4_dblbig.jpg");
            background-size: cover;
            background-position: center;
          }
          &.three {
            background: url("https://www.martplaza.com/resourcefiles/things-to-do-slider-slider/navy-pier-at-chicago-th.jpg");
            background-size: cover;
            background-position: center;
          }
        }
      }
    }
  }
  .copy {
    padding: 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    margin-bottom: 35px;
    color: graytext;
    .time {
      display: inline-block;
    }
    .comments {
      display: inline-block;
      margin-left: 20px;
      cursor: pointer;
      transition: 0.2s all;
      &:hover {
        color: darkred;
        transition: 0.2s all;
      }
    }
  }
}
</style>
